<template>
  <view class="dashboard-container">
    <!-- 头部信息 -->
    <view class="header">
      <view class="header-content">
        <text class="welcome-text">班主任仪表板</text>
        <text class="user-name">{{ displayName }}</text>
      </view>
    </view>

    <!-- 统计卡片 -->
    <view class="stats-section">
      <view class="stats-grid">
        <view class="stat-card">
          <view class="stat-icon">👥</view>
          <text class="stat-number">{{ studentCount }}</text>
          <text class="stat-label">学生总数</text>
        </view>
        <view class="stat-card">
          <view class="stat-icon">📝</view>
          <text class="stat-number">{{ recordCount }}</text>
          <text class="stat-label">今日记录</text>
        </view>
        <view class="stat-card">
          <view class="stat-icon">⭐</view>
          <text class="stat-number">{{ praiseCount }}</text>
          <text class="stat-label">表扬记录</text>
        </view>
        <view class="stat-card">
          <view class="stat-icon">⚠️</view>
          <text class="stat-number">{{ criticismCount }}</text>
          <text class="stat-label">批评记录</text>
        </view>
      </view>
    </view>

    <!-- 快捷操作 -->
    <view class="actions-section">
      <text class="section-title">快捷操作</text>
      <view class="actions-grid">
        <view class="action-card" @click="navigateToStudentList">
          <view class="action-icon">👥</view>
          <text class="action-title">学生列表</text>
          <text class="action-desc">查看和管理学生信息</text>
        </view>
        <view class="action-card" @click="navigateToStudentRecord">
          <view class="action-icon">📝</view>
          <text class="action-title">学生记录</text>
          <text class="action-desc">记录学生表现</text>
        </view>
        <view class="action-card" @click="navigateToExcelImport">
          <view class="action-icon">📊</view>
          <text class="action-title">Excel导入</text>
          <text class="action-desc">批量导入学生数据</text>
        </view>
      </view>
    </view>

    <!-- 最近记录 -->
    <view class="recent-section">
      <text class="section-title">最近记录</text>
      <view class="record-list">
        <view v-for="record in recentRecords" :key="record.id" class="record-item">
          <view class="record-header">
            <text class="student-name">{{ record.studentName }}</text>
            <text class="record-time">{{ formatTime(record.createTime) }}</text>
          </view>
          <view class="record-content">
            <view class="record-type" :class="record.type">
              {{ getRecordTypeText(record.type) }}
            </view>
            <text class="record-text">{{ record.content }}</text>
          </view>
        </view>
        <view v-if="recentRecords.length === 0" class="empty-state">
          <text class="empty-text">暂无记录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { authGetters } from '@/store/modules/auth'

// 响应式数据
const studentCount = ref(0)
const recordCount = ref(0)
const praiseCount = ref(0)
const criticismCount = ref(0)
const recentRecords = ref([])

// 计算属性
const displayName = computed(() => authGetters.displayName.value)

// 生命周期
onMounted(() => {
  loadDashboardData()
})

// 方法
/**
 * 加载仪表板数据
 */
const loadDashboardData = () => {
  // 模拟数据
  studentCount.value = 28
  recordCount.value = 5
  praiseCount.value = 12
  criticismCount.value = 3

  recentRecords.value = [
    {
      id: 1,
      studentName: '张三',
      type: 'praise',
      content: '课堂表现积极，认真听讲',
      createTime: new Date(Date.now() - 3600000) // 1小时前
    },
    {
      id: 2,
      studentName: '李四',
      type: 'criticism',
      content: '作业完成不及时',
      createTime: new Date(Date.now() - 7200000) // 2小时前
    },
    {
      id: 3,
      studentName: '王五',
      type: 'praise',
      content: '帮助同学，表现突出',
      createTime: new Date(Date.now() - 10800000) // 3小时前
    }
  ]
}

/**
 * 格式化时间
 */
const formatTime = (time: Date) => {
  const now = new Date()
  const diff = now.getTime() - time.getTime()
  const hours = Math.floor(diff / 3600000)

  if (hours < 1) {
    const minutes = Math.floor(diff / 60000)
    return `${minutes}分钟前`
  } else if (hours < 24) {
    return `${hours}小时前`
  } else {
    const days = Math.floor(hours / 24)
    return `${days}天前`
  }
}

/**
 * 获取记录类型文本
 */
const getRecordTypeText = (type: string) => {
  const typeMap = {
    praise: '表扬',
    criticism: '批评',
    suggestion: '建议'
  }
  return typeMap[type] || type
}

/**
 * 导航到学生列表
 */
const navigateToStudentList = () => {
  uni.navigateTo({
    url: '/pages/teacher/student-list'
  })
}

/**
 * 导航到学生记录
 */
const navigateToStudentRecord = () => {
  uni.navigateTo({
    url: '/pages/teacher/student-record'
  })
}

/**
 * 导航到Excel导入
 */
const navigateToExcelImport = () => {
  uni.navigateTo({
    url: '/pages/teacher/excel-import'
  })
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 20px;
  padding-bottom: 80px;
}

// 头部
.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 30px 20px;
  border-radius: 16px;
  margin-bottom: 20px;

  .header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .welcome-text {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
  }

  .user-name {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
  }
}

// 统计卡片
.stats-section {
  margin-bottom: 30px;

  .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 16px;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .stat-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;

    &:active {
      transform: translateY(2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .stat-icon {
      font-size: 32px;
      margin-bottom: 8px;
      display: block;
    }

    .stat-number {
      font-size: 24px;
      font-weight: 700;
      color: #2c3e50;
      display: block;
      margin-bottom: 4px;
    }

    .stat-label {
      font-size: 14px;
      color: #7f8c8d;
    }
  }
}

// 快捷操作
.actions-section {
  margin-bottom: 30px;

  .actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .action-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;

    &:active {
      transform: translateY(2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .action-icon {
      font-size: 40px;
      margin-bottom: 12px;
      display: block;
    }

    .action-title {
      font-size: 16px;
      font-weight: 600;
      color: #2c3e50;
      display: block;
      margin-bottom: 4px;
    }

    .action-desc {
      font-size: 12px;
      color: #7f8c8d;
      line-height: 1.4;
    }
  }
}

// 最近记录
.recent-section {
  .record-list {
    .record-item {
      background: white;
      padding: 16px;
      border-radius: 12px;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

      .record-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;

        .student-name {
          font-size: 16px;
          font-weight: 600;
          color: #2c3e50;
        }

        .record-time {
          font-size: 12px;
          color: #7f8c8d;
        }
      }

      .record-content {
        display: flex;
        align-items: flex-start;
        gap: 8px;

        .record-type {
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 12px;
          font-weight: 500;
          white-space: nowrap;

          &.praise {
            background: #d4edda;
            color: #155724;
          }

          &.criticism {
            background: #f8d7da;
            color: #721c24;
          }

          &.suggestion {
            background: #fff3cd;
            color: #856404;
          }
        }

        .record-text {
          font-size: 14px;
          color: #495057;
          line-height: 1.4;
          flex: 1;
        }
      }
    }

    .empty-state {
      text-align: center;
      padding: 40px;
      color: #7f8c8d;

      .empty-text {
        font-size: 16px;
      }
    }
  }
}

// 响应式设计
@media (max-width: 400px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .actions-grid {
    grid-template-columns: 1fr;
  }
}
</style>